附上為何鐵人賽文章會出現在這裡的說明：2022 鐵人賽｜Day1 報名失敗，還是要開賽吧！

背景脈絡

Day 6 介紹了經典的三大 display，接者就來整理排版寵兒 flexbox 系統的筆記！

主題筆記

一、首先要釐清 flexbox 系統下的兩種元素

✅ Flex container：
被設定display: flex的父元素，它裡面包裹著的第一層子元素就是 Flex items

✅ Flex items：
被父元素 Flex container 包裹著的子元素，我們可以透過 flex 專屬的 properties 來安排 items 的排列方式

二、放在 Flex container 的 properties

在選定的 Flex container 放入display: flex後，就可以開始對所有的 Flex items 進行排列

（以下介紹 properties 的值，第一個都為預設值）
（圖片部分，container 有設定 padding）

flex-direciton

決定排列 items 的主軸是水平方向，還是垂直方向 （決定後，另一個方向即為交叉軸）

• row 由左而右的水平方向為主軸
• row-reverse 與 row 相反，由右而左的水平方向為主軸
• column 由上而下的垂直方向為主軸
• column-reverse 與 column 相反，由下而上的垂直方向為主軸

flex-wrap

決定 items 一行塞不下時，要不要換行，還是就彼此縮小塞在同一行

• nowrap 彼此縮小塞在同一行
• wrap 一行塞不下時，換行
• wrap-reverse 一行塞不下時，換行時往反方向換行

flex-flow

把 flex-direciton、flex-wrap 寫在一起的精簡寫法！

flex-flow: row wrap;

justify-content

決定 items 如何在主軸上排列

• flex-start items 集中於主軸的 start
• center items 集中於主軸的中間
• flex-end items 集中於主軸的 end
• space-between 主軸的 start end 不會有空間，剩下的空間平均分配
• space-around 每個 items 的左右(row時)/上下(column時)會有相等的空間
  （換個說法：主軸的 start end 會有空間（比例為1），剩下的空間平均分配（比例為2））
• space-evenly 主軸的 start end 會有空間，且與中間的空間平均分配

⬆️ 圖片取自於ALPHA Camp課程講義

.

align-items

決定 items 在交叉軸上的排列

• stretch 延展開來，除了已經設定 width or height 的 item（下列示意圖 2 號有設定 height）
• flex-start 集中於該行之頂端
• center 集中於該行之中間
• flex-end 集中於該行之尾端
• baseline 先把內容對齊 baseline，整體 item 隨著跑（通常文字下緣對齊的地方稱為 baseline）

align-content

決定因 wrap 而產生兩行以上的 items，「行與行之間」的排列呈現
（個人感覺就是交叉軸版的justify-content，直接上圖感受一下）

stretch、flex-start、center、flex-end、space-between、space-around、space-evenly

.
.
.
下篇會介紹「放在 Flex items 的 properties」！

疑惑

在實作 align-items: stretch 時，當我調整 2 號的高，只有在內容高度以內的調整才不會影響到其他 items，如果超過內容高度，其他 items 也會有所變動。(還在研究這之間的關係比例?）

參考資料

。 ALPHA Camp課程講義
。 W3School Flexbox
。 超推薦練習 flexbox 的好網站 ➡️ FLEXBOX FROGGY

以上是今天的分享，謝謝看完的你！